<script setup>
import { computed, inject } from 'vue';
import { DeleteOutlined } from '@ant-design/icons-vue';
import { VisibleIcon } from '@/util/index.js';

const props = defineProps(['item']);
const icon = computed(VisibleIcon(() => props.item.visible));

const OpGte = inject('OpGte');
const editingComment = inject('editingComment');
const selectComment = inject('selectComment');
const delComment = inject('delComment');
</script>

<template>
  <li
    class="label-comment"
    :class="{ selected: props.item == editingComment }"
    @click="() => selectComment(props.item)">
    <span class="reason">{{ props.item.rejectReason }}</span>
    <a-tooltip placement="left">
      <template #title>{{ props.item.remark }}</template>
      <span class="remark ellipsis">{{ props.item.remark }}</span>
    </a-tooltip>


    <div class="fn">
      <template v-if="OpGte('审核')">
        <a-popconfirm
          title="确定删除此数据？"
          placement="left"
          ok-text="确定"
          cancel-text="取消"
          @confirm="() => delComment(props.item)"
        >
          <a-button>
            <template #icon><delete-outlined style="color: rgb(200,0,0);" /></template>
          </a-button>
        </a-popconfirm>
      </template>
  
      <a-button @click.stop="() => props.item.visible = !props.item.visible">
        <template #icon>
          <component :is="icon" style="color: rgb(26,115,232);"></component>
        </template>
      </a-button>
    </div>
  </li>
</template>

<style>
.obj-detn .label-comments .label-comment {
  align-items: baseline;
  height: auto;
  min-height: 40px;
  line-height: 40px;
}

.label-comment .reason {
  flex: unset;
  color: rgb(200,0,0);
}

.label-comment .remark {
  flex: 1;
  width: 0;
  line-height: normal;
}
</style>
